<template>
  <div class="page">

    <myHeader class="my-header"></myHeader>


    <div class="banner-box">



      <img class="banner" src="../assets/banner.webp" alt="">
      <!-- <div style="background-color: white;line-height: 40px;height: 40px;font-weight: 700;">视频介绍</div>
      <video style="width: 100%;" src="../assets/shiping.mp4" controls></video> -->
    </div>

    <div class="plate1">
      <div class="plate1-left">
        <div class="plate1-title">关于welin</div>
        <div class="plate1-left-content">
          WELIN品牌於中國香港創立,源自對卓越的持續追求。WELIN不僅是一個品牌的象徵,它代表了對健康生活之美的崇敬以及對高品質生活的承諾。
          WELIN堅持 <span
            style="font-weight: 700; color: #091a0f;">「科學、安全、營養、全面」</span>的理念,通過綠色創新科技、精選優質原料、結合海內外文獻研究成果以及對生產過程的嚴格監控,共同構築WELIN品牌的獨特優勢,致力於打造更適合東方人體質的綠色健康產品。
          選擇WELIN,就是選擇對健康的尊重與熱愛。讓我們一起走進WELIN的世界,感受來自大自然的純淨與健康的力量。
        </div>
        <div>
          <img style="width: 100%;" src="../assets/home1.png" alt="">
        </div>

        <div class="plate1-title">業務介紹</div>

        <div class="plate1-left-content">
          WELIN專注於海外膳食營養補充劑業務,並提供海外知名品牌的參茸海味、中西成藥等代購服務。產品享有4T健康安全認證,已通過國際檢測機構的嚴格檢驗。憑藉多年豐富的行業經驗和專業的養生團隊,WELIN致力於為客戶提供優質、健康且專業的產品服務。
        </div>
        <div class="gongxiao">嚴格進行檢測,4T護航全家健康</div>

        <div class="plate1-left-content">
          1.通過重金屬測試<br>
          2.通過微生物測試 <br>
          3.通過農藥殘留測試<br>
          4.通過塑化劑測試
        </div>

        <div>
          <img style="width: 100%;" src="../assets/home3.png" alt="">
        </div>

        <div>
          <img style="width: 100%;" src="../assets/home4.png" alt="">
        </div>

        <div>
          <img style="width: 100%;" src="../assets/home5.png" alt="">
        </div>

      </div>
      <div class="plate1-right">
        <!-- <div class="plate1-title">業務介紹</div>

        <div class="plate1-right-content">
          WELIN專注於海外膳食營養補充劑業務,並提供海外知名品牌的參茸海味、中西成藥等代購服務。產品享有4T健康安全認證,已通過國際檢測機構的嚴格檢驗。憑藉多年豐富的行業經驗和專業的養生團隊,WELIN致力於為客戶提供優質、健康且專業的產品服務。
        </div>
        <div class="gongxiao">嚴格進行檢測,4T護航全家健康</div>

        <div class="plate1-right-content">
          1.通過重金屬測試
          2.通過微生物測試 <br>
          3.通過農藥殘留測試
          4.通過塑化劑測試
        </div>

        <div>
          <img style="width: 100%;" src="../assets/home2.png" alt="">
        </div>

        <div>
          <img style="width: 100%;" src="../assets/n15.jpg" alt="">
        </div> -->



      </div>
    </div>
















    <div class="honor">
      <div>
        <div class="honoe-title">認證</div>
        <div class="honor-box">
          <div v-for="(item, index) of Certifications" :key="index">
            <img class="cer-img" :src="require('@/assets/' + item.img)" alt="">
          </div>
        </div>
      </div>

      <div>
        <div class="honoe-title">安全闡述</div>
        <div class="honor-box">
          <div v-for="(item, index) of Safely" :key="index">
            <img class="cer-img" :src="require('@/assets/' + item.img)" alt="">
          </div>
        </div>
      </div>
    </div>






    <myFooter></myFooter>



    <div class="back-box" @click="backTop">
      <div class="iconfont icon-xiangshang1"></div>
    </div>


  </div>
</template>

<script>
import myFooter from '../components/myFooter.vue';
import myHeader from '../components/myHeader.vue';


export default {
  name: 'HomePage',
  components: {
    myFooter,
    myHeader
  },
  data() {
    return {
      list: [
        { img: 'distr/P01.png', name: 'Lipase Fat Burnuing', price: '47.00', spec: '60粒/瓶', pattern: '每日两次,每次一粒', place: '香港' },
        { img: 'distr/P02.png', name: 'TRIBULUS plus ZINC', price: '109.00', spec: '120片/瓶', pattern: '每日两次,每次一片', place: '香港' },
        { img: 'distr/P03.png', name: 'Intestinal GUT SUPPORT', price: '47', spec: '120片/瓶', pattern: '每日两次,每次一片', place: '香港' },
        { img: 'distr/P04.png', name: 'CO Q10', price: '47', spec: '120片/瓶', pattern: '每日两次,每次一片', place: '香港' },
        { img: 'distr/P05.png', name: 'EYE FIT', price: '47', spec: '30粒/瓶', pattern: '每日一次,每次一粒', place: '香港' }
      ],
      Certifications: [
        { img: 'FDA.png' },
        { img: 'h02.jpg' },
        { img: 'h03.jpg' },
        { img: 'h04.jpg' },
        { img: 'h05.jpg' }
      ],
      Safely: [
        { img: 'h2-1_01.jpg' },
        { img: 'h2-1_02.jpg' },
        { img: 'h2-1_03.jpg' },
        { img: 'h2-1_04.jpg' },
        { img: 'h2-1_05.jpg' },
        { img: 'h2-1_06.jpg' }
      ],
      fontList: [
        { name: '进口鱼油', icon: 'icon-yu' },
        { name: '藻油DHA', icon: 'icon-shape-' },
        { name: '维生素', icon: 'icon-shuiguo' }
      ]
    }
  },
  mounted() {
    this.$axios({
      method: 'post',
      url: '/api/visit/client/createVisit',
      data: {
        pageName: 'home'
      }
    }).then(res => {
      console.log(res);
    })
  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped lang="less">
.banner-box {
  text-align: center;
  background-color: #e9e9eb;
  margin-top: 105px;

  .banner {
    width: 100%;
    display: block;
  }
}

.video-box {
  padding: 20px 10vw 0 10vw;

  .publicity-video {
    width: 100%;
  }
}


.plate1 {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;

  .plate1-left {
    // width: 37.6%;
    width: 100%;

    .gongxiao {
      font-size: 26px;
      font-weight: 700;
      line-height: 40px;
    }

    .plate1-title {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 50px;
    }

    .plate1-left-content {
      font-size: 18px;
      line-height: 36px;
    }
  }

  .plate1-left1 {
    width: 0%;
  }



  .plate1-right {
    // width: 57.2%;
    width: 0%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-right-content {
      font-size: 13px;
    }

    .plate1-right-mid {
      display: flex;
      justify-content: space-around;
      font-size: 16px;


      .plate1-right-mid-cell {
        text-align: center;

        .iconfont {
          font-size: 36px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }


    }

    .plate1-right-foot {
      .p-list {
        display: flex;

        .p-item {
          text-align: center;

          .p-item-img {
            width: 200px;
          }
        }
      }
    }

  }


  .plate1-right1 {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .plate1 {
    width: 1170px;
    margin: 0 auto;
  }
}





.honor {
  .honoe-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    padding: 20px 0;
  }

  .honor-box {
    margin: 10px 0;
    display: flex;
    padding: 0 10vw;
    justify-content: space-around;
    flex-wrap: wrap;

    .cer-img {
      width: 117px;
      height: auto;
    }
  }

}



.back-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
  background-color: black;
  color: white;
}

@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }

  .plate1 {
    display: block;
    padding-top: 30px;

    .plate1-left {
      width: 100%;
      padding: 10px 5% 0 5%
    }

    .plate1-right {
      width: 100%;
      padding: 10px 5% 0 5%;

      // .plate1-right-content {
      //   font-size: 13px;
      //   color: red;
      // }

      .plate1-right-foot {
        .p-list {
          display: flex;

          .p-item {
            text-align: center;

            .p-item-img {
              width: 100px !important;
            }
          }
        }
      }
    }
  }

  .video-box {
    padding: 5px 0vw 0 0vw;

    .publicity-video {
      width: 100%;
    }
  }


  .honor {
    .honoe-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      padding: 20px 0;
    }

    .honor-box {
      margin: 10px 0;
      display: flex;
      padding: 0 10vw;
      justify-content: space-around;
      flex-wrap: wrap;

      .cer-img {
        width: 90px;
        height: auto;
      }
    }

  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .p-item-img {
    width: 90vw !important;
    height: auto !important;
  }

  .footer {
    height: 138px;
  }
}
</style>
